<template > 
    <div class="boxSign"> 
        <div class="contentSign">
            <div class="esign">
                <vue-esign ref="esign" :width="screenWidth" :height="screenHeight" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor"
                :bgColor.sync="bgColor" />
            </div>
            
            <!-- <img :src="resultImg" alt="" style="width: 80px;height: 30px;"> -->
            <div class="btnsSign">
                <el-button size = "mini" @click="handleReset" type="warning">清空</el-button>
                <el-button size = "mini" @click="handleGenerate" type="success">确认</el-button>
            </div>
           

        </div>
    </div>
</template>
<script>
import pagePublic from "@/mixins/pagePublic.js";
import { mapMutations, mapState } from "vuex";
    export default {
        name: "tem",
        mixins: [pagePublic],
        data(){
            return{
                lineWidth: 10,
                lineColor: '#000000',
                bgColor: '',
                resultImg: '',
                isCrop: false,
                screenWidth:390,
                screenHeight:844,

                // urls:{
                //     list: {
                //         url:this.$api.tem.list,
                //         method:"get",
                //         sync:false,
                //     },
                //     add:this.$api.tem.add,
                //     edit:this.$api.tem.edit,
                //     del:this.$api.tem.del
                // },

                
            }
        },
        computed: {
            ...mapState(['configInfo']),

        },
        created() {
            const screenWidth = window.innerWidth; // 屏幕宽度
            const screenHeight = window.innerHeight; // 屏幕高度
            this.screenWidth = screenWidth;
            this.screenHeight = screenHeight;
            console.log(screenWidth, screenHeight);
        },
        methods:{
            ...mapMutations(['set_configInfo']),
            handleReset() {
                this.$refs['esign'].reset() //清空画布
                this.resultImg = ''
            },
            handleGenerate() {
                let that = this
                this.$refs['esign'].generate().then(res => {
                    // this.$nextTick(() => {
                    //     this.resultImg = res
                    //     console.log(res, '0987657890876')

                    // })
                    // const bl = this.convertBase64UrlToBlob(res);
                    const bl = this.dataURLtoFile(res, 'a.png');
                    this.$api.upload({file:bl}).then(e => {
                        console.log(e.data, '0987657890876')
                        this.resultImg = e.data
                        this.$emit('result',e.data)
                        
                    })
                    // uploadGrayFile(formData).then((response) => {
                    //     if (response.code == 200) {
                    //     this.resultImageUrl = response.path
                    //     this.$message({
                    //         message: '签名上传成功！',
                    //         type: 'success'
                    //     })
                    //     return;
                    //     }
                    //     this.$vux.loading.hide();
                    //     this.$toast("签名上传失败！");
                    // })
                    // }).catch(err => { //  没有签名，点击生成图片时调用
                    //     this.$message({
                    //         message: '请先签名！',
                    //         type: 'warning'
                    //     })
                    // // alert(err) // 画布没有签字时会执行这里 'Not Signned'
                })
            },
            convertBase64UrlToBlob(urlData) {
                const type = "image/png";
                let bytes = null;
                if (urlData.split(",").length > 1) {
                    bytes = window.atob(urlData.split(",")[1]);
                } else {
                    bytes = window.atob(urlData);
                }
                let ab = new ArrayBuffer(bytes.length);
                let ia = new Uint8Array(ab);
                for (let i = 0; i < bytes.length; i++) {
                    ia[i] = bytes.charCodeAt(i);
                }
                return new Blob([ab], { type });
            },
            /**
             * Base64字符串转File文件
             * @param {String} dataurl Base64字符串(字符串包含Data URI scheme，例如：data:image/png;base64, )
             * @param {String} filename 文件名称
             */
            dataURLtoFile(dataurl, filename) {
                let arr = dataurl.split(',');
                let mime = arr[0].match(/:(.*?);/)[1];
                let bstr = atob(arr[1]);
                let n = bstr.length;
                let u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new File([u8arr], filename, {
                    type: mime
                });
            },
        }
    }
</script>
<style lang="scss" scoped>
.boxSign{
    // width: 100%;
    position: absolute;
    width: 100vw;
    height: 100vh;
    inset: 0;
    // transform: rotate(90deg);
    background-color: #ccc;
    .contentSign{
        width: 100%;
        height: 100%;
        .esign{
            width: 100vw;
            height: 100vh;
            // transform: rotate(90deg);

        }
        .btnsSign{
            position: fixed;
            width: 100px;
            right: 50px;
            bottom: calc(50% - 10px);
            transform-origin: bottom right ;
            transform: rotate(90deg);
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>